<template>
  <el-row :gutter="20">
    <el-col :span="14">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
       <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
          <!-- <div :title="ruleForm.username">{{ruleForm.username}}</div> -->
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="mail">
          <el-input v-model="ruleForm.mail"></el-input>
        </el-form-item>
        <el-form-item label="账户类型" prop="type">
          <el-select v-model="ruleForm.type" placeholder="账户类型">
            <el-option
              v-for="item in typeOption"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="0">停用</el-radio>
            <el-radio label="1">正常</el-radio>
          </el-radio-group>
        </el-form-item>
          <el-form-item label="积分" prop="score">
          <el-input v-model="ruleForm.score"></el-input>
        </el-form-item>
         <el-form-item label="vip到期时间">
          <el-col :span="11">
            <el-date-picker  type="datetime" placeholder="选择日期" v-model="ruleForm.vipEndTime" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="密码" prop="password" >
          <el-input v-model="ruleForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="repwd">
          <el-input v-model="ruleForm.repwd" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >保存</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import { fieldMap, publicFilter } from "@/utils/showMap";
import store from "@/store";
import { userInfo, getUserInfo } from "@/api/service";
 export default {
    data() {
		var validatePass = (rule, value, callback) => {
		  if (this.ruleForm.repwd !== "") {
		    this.$refs.ruleForm.validateField("repwd");
		  }
		  callback();
		};
		var validatePass2 = (rule, value, callback) => {
		  if (value !== this.ruleForm.password) {
		    callback(new Error("两次输入密码不一致!"));
		  } else {
		    callback();
		  }
		};
      return {
        typeOption:fieldMap.user_type,
        ruleForm: {
        id:"",
        username: "",
        status: '1',
        type:"1",
        mail:'',
        mobile: '',
        score:"",
        vipEndTime: '',
        password: '',
        repwd: '',
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          status: [
            { required: true, message: '请选择状态', trigger: 'blur' }
          ],
          type: [
            {required: true, message: '请选择类型', trigger: 'change' }
          ],
          mail: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
          ],
          mobile: [
            { required: true, message: '请输入电话', trigger: 'blur' },
          ],

          // score: [
          //   { required: true, message: '请输入积分', trigger: 'change' }
          // ],
          password: [
            { validator: validatePass,
            trigger: "blur", }
          ],
          repwd: [
            {
            validator: validatePass2,
            trigger: "blur", }
          ],
          vipEndTime: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
        }
      };
    },
    mounted(){
      //加载
      if(this.$route.query.id) this.search(this.$route.query.id);
    },
    methods: {
     search(args) {
        getUserInfo(args).then((res) => {
          for(let key in res.data){
            if(this.ruleForm.hasOwnProperty(key))
            this.ruleForm[key]=res.data[key]!==null?String(res.data[key]):"";
          }
        });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // console.log(this.ruleForm.vipEndTime.toISOString()); 
            this.ruleForm.vipEndTime=this.ruleForm.vipEndTime.toISOString()
            // console.log(this.ruleForm,this.dateFormat('2021-01-28T00:00:00.000Z'));
             userInfo(this.ruleForm).then((res) => {
              this.$router.push('/manage/userList');
            });
          } else {
            return false;
          }
        });

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      dateFormat:(args)=>{
            let fmt="YYYY-mm-dd HH:MM:SS"
            let ret;
            if(args){
              let  date=new Date(args)
                 const opt = {
                "Y+": date.getFullYear().toString(),        // 年
                "m+": (date.getMonth() + 1).toString(),     // 月
                "d+": date.getDate().toString(),            // 日
                "H+": date.getHours().toString(),           // 时
                "M+": date.getMinutes().toString(),         // 分
                "S+": date.getSeconds().toString()          // 秒
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                };
            };
            return fmt;
            }else{
              return "";
            }
        }
    }
  }
</script>
<style lang="less" scoped>
.demo-ruleForm{
  text-align: left;
}
</style>
